<!DOCTYPE html>
<html xmlns:haipai="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>欢迎页</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="/css/style.css?v=4.1.0"  rel="stylesheet">
    <link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link rel="stylesheet" href="/css/layout.css">
    <link rel="stylesheet" href="js/plugins/chartist/dist/chartist.min.css">

</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">

        <div class="col-sm-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>2023年会员预约及注册统计数据</h5>
                    <div class="ibox-tools">

                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row m-row--col-separator-xl">
                        <div class="col-sm-4">
                            <div class="ibox-content m-content">
                                <div>

                                    <div class="pull-right text-right">
                                        <div class="stat-percent datavluetext">267.85人</div>
                                    </div>
                                    <h4>注册会员总数
                                        <br>
                                        <small style="margin-top: 5px" class="m-r">同比 <span class="text-navy" style="margin-left: 20px">10.02% <i class="fa fa-level-up"></i></span> </small>
                                    </h4>
                                </div>
                            </div>
                            <div class="ibox-content m-content">
                                <div>

                                    <div class="pull-right text-right">
                                        <div class="stat-percent datavluetext">2790次</div>
                                    </div>
                                    <h4>总预约人次
                                        <br>
                                        <small style="margin-top: 5px" class="m-r">同比 <span class="text-navy" style="margin-left: 20px">5.2% <i class="fa fa-level-up"></i></span> </small>
                                    </h4>
                                </div>
                            </div>
                            <div class="ibox-content m-content">
                                <div>

                                    <div class="pull-right text-right">
                                        <div class="stat-percent datavluetext">64.57%</div>
                                    </div>
                                    <h4>预约平均签到率
                                        <br>
                                        <small style="margin-top: 5px" class="m-r">同比 <span class="text-navy" style="margin-left: 20px">1.15% <i class="fa fa-level-up"></i></span> </small>
                                    </h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4 m-widget" >
                            <div class="m-header">
                                <h4 class="m-title">
                                    	接待会员人数
                                </h4>
                                <span class="m-desc">

												</span>
                            </div>
                            <div class="row  align-items-center">
                                <div class="col-sm-5">
                                    <div id="pieChart1" class="m-chart" style="height: 160px">
                                        <div class="m-stat">2670.85</div>
                                    </div>
                                </div>
                                <div class="col-sm-7">
                                    <div class="m-legends">
                                        <div class="m-legend">
                                            <span class="m-legend-bullet m--bg-accent"></span>
                                            <span class="m-legend-text">2232.42人 10~20岁会员人数</span>
                                        </div>
                                        <div class="m-legend">
                                            <span class="m-legend-bullet m--bg-warning"></span>
                                            <span class="m-legend-text">260.13人  20~40岁会员人数</span>
                                        </div>
                                        <div class="m-legend">
                                            <span class="m-legend-bullet m--bg-brand"></span>
                                            <span class="m-legend-text">412.29人  大于40岁会员人数</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4 m-widget" >
                            <div class="m-header">
                                <h4 class="m-title">
                                   	 充值总收入
                                </h4>
                                <span class="m-desc">

												</span>
                            </div>
                            <div class="row  align-items-center">
                                <div class="col-sm-5">
                                    <div id="pieChart2" class="m-chart" style="height: 160px">
                                        <div class="m-stat">279.84</div>
                                    </div>
                                </div>
                                <div class="col-sm-7">
                                    <div class="m-legends">
                                        <div class="m-legend">
                                            <span class="m-legend-bullet m--bg-green"></span>
                                            <span class="m-legend-text">1.2万元  日会员收入</span>
                                        </div>
                                        <div class="m-legend">
                                            <span class="m-legend-bullet m--bg-yellow"></span>
                                            <span class="m-legend-text">3.4万元 月会员收入</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="col-sm-7">
            <div class="ibox ">
                <div class="ibox-content">
                    <div>
                                        <span class="float-right text-right" style="float: right;">
                                        <strong>海口市</strong>
                                        </span>
                        <h3 class="font-bold no-margins">
                            2023年会员消费情况数据分析
                        </h3>
                        <small>人数/收入</small>
                    </div>

                    <div class="m-t-sm">

                        <div class="row">
                            <div class="col-sm-12">
                                <div>
                                    <canvas id="lineChart" ></canvas>
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="m-t-md">
                        <small class="float-right" style="float: right">
                            <i class="fa fa-clock-o"> </i>
                            截止2018.12.31 数据来源预约系统
                        </small>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-sm-5">

                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>2023年12月会员数据</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content table-responsive">
                        <table class="table table-hover no-margins">
                            <thead>
                            <tr>
                                <th>项目指标</th>
                                <th>数量</th>
                                <th>同比（%）</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>接待会员总数</td>
                                <td>/</td>
                                <td class="text-navy">
                                    <!--<i class="fa fa-level-up"></i>-->
                                    / </td>
                            </tr>
                            <tr>
                                <td>接待散客总数 </td>
                                <td>/</td>
                                <td class="text-navy">
                                    <!--<i class="fa fa-level-up"></i>-->
                                    / </td>
                            </tr>
                            <tr>
                                <td>学生会员</td>
                                <td>/</td>
                                <td class="text-navy">
                                    <!--<i class="fa fa-level-up"></i>-->
                                    / </td>
                            </tr>
                            <tr>
                                <td>社会人员</td>
                                <td>/</td>
                                <td class="text-navy">
                                    <!--<i class="fa fa-level-up"></i>-->
                                    / </td>
                            </tr>

                            <tr>
                                <td>注册会员总数 </td>
                                <td>/</td>
                                <td class="text-navy">
                                    <!--<i class="fa fa-level-up"></i>-->
                                    / </td>
                            </tr>
                            <tr>
                                <td>年总收入</td>
                                <td>/</td>
                                <td class="text-navy">
                                    <!--<i class="fa fa-level-up"></i>-->
                                    / </td>
                            </tr>
                            <tr>
                                <td>会员收入</td>
                                <td>/</td>
                                <td class="text-navy">
                                    <!--<i class="fa fa-level-up"></i>-->
                                    / </td>
                            </tr>
                            <tr>
                                <td>非会员收入</td>
                                <td>/</td>
                                <td class="text-navy">
                                    <!--<i class="fa fa-level-up"></i>-->
                                    / </td>
                            </tr>
                            <tr>
                                <td>预约比率</td>
                                <td>/</td>
                                <td class="text-navy">
                                    <!--<i class="fa fa-level-up"></i>-->
                                    / </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

        </div>

    </div>

</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/openTab.js"></script>
<!-- ChartJS-->
<script src="js/plugins/chartJs/Chart.min.js"></script>
<script src="js/plugins/chartist/dist/chartist.min.js"></script>
<script>
    $(document).ready(function() {
       // var data1 = [
        //     { label: "Data 1", data: d1, color: '#17a084'},
        //     { label: "Data 2", data: d2, color: '#127e68' }
        // ];
        var lineData = {
            labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月","八月","九月","十月","十一月","十二月"],
            datasets: [
                {
                    label: "总收入（万元）",
                    backgroundColor: "rgba(26,179,148,0.5)",
                    borderColor: "rgba(26,179,148,0.7)",
                    pointBackgroundColor: "rgba(26,179,148,1)",
                    pointBorderColor: "#fff",
                    data: [19.79, 24.74, 24.21, 20.11, 21.1, 18.31, 20.28,20.98,21.93,31.79,32.49,24.11]
                },
                {
                    label: "接待会员人数（人次）",
                    backgroundColor: "rgba(220,220,220,0.5)",
                    borderColor: "rgba(220,220,220,1)",
                    pointBackgroundColor: "rgba(220,220,220,1)",
                    pointBorderColor: "#fff",
                    data: [163.18, 263.81, 207.81, 174.55, 188.86, 149.22, 164.73,189.23,198.69,290.73,215.57,282.09]
                }
            ]
        };
        var lineOptions = {
            responsive: true
        };
        var ctx = document.getElementById("lineChart").getContext("2d");
        new Chart(ctx, {type: 'line', data: lineData, options:lineOptions});

        drawPieChart1();
        drawPieChart2();
    });
    var drawPieChart1 = function() {
        if ($('#pieChart1').length == 0) {
            return;
        }

        var chart = new Chartist.Pie('#pieChart1', {
            series: [{
                value: 2232.42,
                className: 'custom',
                meta: {
                    color: "#71F4D8"
                }
            },
                {
                    value: 26.13,
                    className: 'custom',
                    meta: {
                        color: "#65ACD9"
                    }
                },
                {
                    value: 412.29,
                    className: 'custom',
                    meta: {
                        color: "#46D6BC"
                    }
                }
            ],
            labels: ['国内过夜游客', '一日游游客', '入境过夜游客']
        }, {
            donut: true,
            donutWidth: 17,
            showLabel: false
        });

        chart.on('draw', function(data) {
            if (data.type === 'slice') {
                // Get the total path length in order to use for dash array animation
                var pathLength = data.element._node.getTotalLength();

                // Set a dasharray that matches the path length as prerequisite to animate dashoffset
                data.element.attr({
                    'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
                });

                // Create animation definition while also assigning an ID to the animation for later sync usage
                var animationDefinition = {
                    'stroke-dashoffset': {
                        id: 'anim' + data.index,
                        dur: 1000,
                        from: -pathLength + 'px',
                        to: '0px',
                        easing: Chartist.Svg.Easing.easeOutQuint,
                        // We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
                        fill: 'freeze',
                        'stroke': data.meta.color
                    }
                };

                // If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
                if (data.index !== 0) {
                    animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
                }

                // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us

                data.element.attr({
                    'stroke-dashoffset': -pathLength + 'px',
                    'stroke': data.meta.color
                });

                // We can't use guided mode as the animations need to rely on setting begin manually
                // See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
                data.element.animate(animationDefinition, false);
            }
        });

        // For the sake of the example we update the chart every time it's created with a delay of 8 seconds
        return;


    }
    var drawPieChart2 = function() {
        if ($('#pieChart2').length == 0) {
            return;
        }

        var chart = new Chartist.Pie('#pieChart2', {
            series: [{
                value: 5.47,
                className: 'custom',
                meta: {
                    color: "#FFB822"
                }
            },
                {
                    value: 274.37,
                    className: 'custom',
                    meta: {
                        color: "#34BFA3"
                    }
                }
            ],
            labels: ['国内过夜游客', '一日游游客']
        }, {
            donut: true,
            donutWidth: 17,
            showLabel: false
        });

        chart.on('draw', function(data) {
            if (data.type === 'slice') {
                // Get the total path length in order to use for dash array animation
                var pathLength = data.element._node.getTotalLength();

                // Set a dasharray that matches the path length as prerequisite to animate dashoffset
                data.element.attr({
                    'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
                });

                // Create animation definition while also assigning an ID to the animation for later sync usage
                var animationDefinition = {
                    'stroke-dashoffset': {
                        id: 'anim' + data.index,
                        dur: 1000,
                        from: -pathLength + 'px',
                        to: '0px',
                        easing: Chartist.Svg.Easing.easeOutQuint,
                        // We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
                        fill: 'freeze',
                        'stroke': data.meta.color
                    }
                };

                // If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
                if (data.index !== 0) {
                    animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
                }

                // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us

                data.element.attr({
                    'stroke-dashoffset': -pathLength + 'px',
                    'stroke': data.meta.color
                });

                // We can't use guided mode as the animations need to rely on setting begin manually
                // See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
                data.element.animate(animationDefinition, false);
            }
        });

        // For the sake of the example we update the chart every time it's created with a delay of 8 seconds
        return;

    }
</script>
</html>